<template>
	<view class="aricle">
		<Header :isHomepage="false"></Header>
		<view class="aricle_title">{{ pageTitle }}</view>
		<view class="aricle_detail">
			<view class="aricle_detail_box">
				<view class="aricle_detail_box_header">
					<view class="aricle_detail_box_header_title">{{ detailInfo?.title }}</view>
					<view class="aricle_detail_box_header_tips">
						<view class="aricle_detail_box_header_tips_item">
							<text>文章来源：</text>
							<text>今生永恒网</text>
						</view>
						<view class="aricle_detail_box_header_tips_item">
							<text>浏览：</text>
							<text>{{ detailInfo?.click }}</text>
						</view>
					</view>
				</view>
				<view class="aricle_detail_box_container">
					<view class="aricle_detail_box_container_text" v-html="detailInfo?.content"></view>
				</view>
			</view>
			
		</view>
		<Footer></Footer>
	</view>
</template>

<script lang="ts" setup>
	import { onLoad } from '@dcloudio/uni-app'
	import Header from '@/components/header/index.vue'
	import Footer from '@/components/footer/index.vue'
	import { ref, defineProps } from 'vue';
	import { articleCateDetail } from '@/api/article.js'
	const pageTitle = ref('')
	const article_id = ref()
	const detailInfo = ref({})
	const getAritcleDetail = async () => {
		await articleCateDetail({id: article_id.value}).then(res=>{
			console.log(res)
			if(res.code == 1){
				detailInfo.value = res.data
			}
		}).catch(error=>{
			console.log(error)
		})
	}
	onLoad(async(options)=>{
		if(options.id){
			article_id.value = options.id
			pageTitle.value = options.pageTitle
		}
		getAritcleDetail()
	})
</script>

<style lang="scss">
	.aricle {
		display: flex;
		flex-direction: column;
		min-height: 100vh; /* Ensure container takes full height */
		background-color: #f5f5f5; /* Match background color */
		padding-bottom: 40rpx; /* Add some padding at the bottom */
		box-sizing: border-box; /* Include padding in height calculation */
		.aricle_title{
			font-size: 28rpx;
			margin-bottom: 10rpx;
		}
		.aricle_detail{
			width: 100%;
			padding: 20rpx;
			box-sizing: border-box;
			
			.aricle_detail_box{
				display: flex;
				flex-flow: column;
				align-items: flex-start;
				padding: 15rpx;
				box-sizing: border-box;
				background-color: #FFFFFF;
				border-radius: 10rpx;
				.aricle_detail_box_header{
					width: 100%;
					display: flex;
					flex-flow: column;
					align-items: center;
					justify-content: center;
					padding: 50rpx 20rpx 20rpx 20rpx;
					box-sizing: border-box;
					border-bottom: #E3E3E3 1px dotted;
					.aricle_detail_box_header_title{
						font-size: 32rpx;
						margin: 0rpx 0 20rpx 0;
					}
					.aricle_detail_box_header_tips{
						width: 100%;
						display: flex;
						align-items: center;
						justify-content: center;
						.aricle_detail_box_header_tips_item{
							font-size: 24rpx;
							color: #999;
							&:nth-child(2){
								margin-left: 30rpx;
							}
						}
					}
				}
				.aricle_detail_box_container{
					width: 100%;
					padding: 20rpx;
					box-sizing: border-box;
					.aricle_detail_box_container_text{
						text-indent: 2em;
						p{
							display: flex;
							align-items: flex-start;
							justify-content: center;
							img{
								width: 100%;
							}
						}
					}
				}
			}
		}
	}
</style>